<template>
  <div class="width_1200 head">
    <a @click="goHome"><img class="logo" src="@/static/imgs/logo.png" alt="" ></a>
    <ul class="head-right">
      <li>
        <a @click="goHome"><i class="el-icon-menu"></i> 首&#8194;页</a>
      </li>
      <li>
        <a @click="goSeller" ><i class="el-icon-search"></i> 现货查询</a>
      </li>
      <li>
        <a @click="goFinancial" ><i class="el-icon-goods"></i> 金融平台</a>
      </li>
      <li v-if="!mobile && isShow" style="width: 124px;">
        <a @click="toLogin"><i class="el-icon-download"></i> 登录/注册</a>
      </li>
      <li v-if="mobile" style="width: 110px;">
        <a class="user" @click="toPersonal">
          <img src="@/static/imgs/user.png" alt="">
          我的账户
        </a>
      </li>
      <li v-if="mobile">
        <a  @click="logOut"><i class="el-icon-upload2"></i> 退&#8194;出</a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  computed: {
    mobile () {
      return this.$store.state.user.mobile
    },
    isShow () {
      let path = this.$route.path
      let show = !((path.indexOf('/login') > -1 || path.indexOf('/register') > -1))
      return show
    }
  },
  methods: {
    goHome () {
      this.$router.push('/home')
    },
    toLogin () {
      this.$router.push('/login')
    },
    goSeller () {
      this.$router.push('/seller/list')
    },
    goFinancial () {
      window.open('http://vip.guan18.com')
    },
    toPersonal () {
      this.$router.push('/account')
    },
    async logOut () {
      await this.$store.dispatch('LogOut')
      this.$router.push('/login')
      // this.$store.dispatch('LogOut').then(() => {
      //   console.log(1)
      //   this.$router.push('/login')
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.head{
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding-top: 40px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  .logo{
    height: 39px;
    width: 114px;
  }
  .head-right{
    display: flex;
    align-items: center;
    li{
      color: #fff;
      width: 89px;
      box-sizing: border-box;
      &:nth-child(2), &:nth-child(3){
        width: 117px;
      }
      a{
        display: block;
        // padding: 0 6px;
        height: 36px;
        // width: 75px;
        line-height: 36px;
        text-align: center;
      }
      a:hover{
        color: #CDD1D8;
        border: 1px solid #B9B5B7;
        border-radius: 18px;
      }
      .user{
        img{
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
